<template>
	<div>
		<div class="container">
			<div class="ctn">
				<span>每周工作</span
				><input type="text" class="txt" v-model="WEEKOVER" /><span>天</span>
			</div>
			<div class="ctn">
				<span>每天</span
				><input type="text" class="txt" v-model="DAYOVER" /><span>点下班</span>
			</div>
		</div>
		<div id="offWeek">{{ str }}</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			WEEKOVER: 5,
			DAYOVER: 17,
			str: "",
		};
	},
	mounted() {
		let that = this;
		setInterval(function() {
			that.doit();
		}, 1000);
		this.str = this.offWeek();
	},
	methods: {
		doit: function() {
			this.str = this.offWeek();
		},
		offWeek: function() {
			let now = new Date();
			let day = now.getDay();
			let hour = now.getHours();
			let res = {};
			res.day = Math.abs(day - this.WEEKOVER);
			let prefix;
			if (
				day < this.WEEKOVER ||
				(day == this.WEEKOVER && hour < this.DAYOVER)
			) {
				prefix = "距周末还有:";
				res.hour = this.DAYOVER - hour;
				res.min = 0 - now.getMinutes();
				res.secend = 0 - now.getSeconds();
			} else {
				prefix = "周末已经过去:";
				res.hour = hour - this.DAYOVER;
				res.min = now.getMinutes();
				res.secend = now.getSeconds();
			}
			if (res.hour < 0) {
				res.day -= 1;
				res.hour += 24;
			}
			if (res.min < 0) {
				res.hour -= 1;
				res.min += 60;
			}
			if (res.secend < 0) {
				res.min -= 1;
				res.secend += 60;
			}
			return (
				prefix +
				(res.day ? res.day + "天" : "") +
				(res.hour ? res.hour + "小时" : "") +
				(res.min ? res.min + "分钟" : "") +
				(res.secend ? res.secend + "秒" : "")
			);
		},
	},
	watch: {
		DAYOVER: {
			handler() {
				this.doit();
			},
		},
		WEEKOVER: {
			handler() {
				this.doit();
			},
		},
	},
};
</script>

<style>
#offWeek {
	position: absolute;
	color: #fff;
	left: 50%;
	transform: translateX(-50%);
	top: 85vh;
}
.container {
	position: absolute;
	color: #fff;
	left: 50%;
	transform: translateX(-50%);
	top: 73vh;
}
.container > .ctn > .txt {
	display: block;
	width: 20px;
	border: none;
	color: #fff;
	background: none;
}
.container > .ctn {
	display: flex;
	align-items: center;
	color: #fff;
}
</style>
